<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="./css/index.css">
    <!--[if lte IE 8]>
    <script src="../js/html5shiv.min.js"></script>
    <![endif]-->

    <title>QQ-TIM</title>
</head>
<body>
    <header class="header">
        <div class="wrapper">
            <a href="#" class="logo"></a>
            <ul class="nav">
                <li class="active">
                    <a href="#">首页</a>
                </li>
                <li>
                    <a href="#">下载</a>
                </li>
                <li>
                    <a href="#">动态</a>
                </li>
            </ul>
            <div class="other">
                <ul class="other-nav">
                    <li>
                        <a href="#">qq安全</a>
                    </li>
                    <li>
                        <a href="#">qq会员</a>
                    </li>
                    <li>
                        <a href="#">登录</a>
                    </li>
                </ul>
                <span>当前在线人数：227,763,015</span>
            </div>
            <a href="#" class="register">注册</a>
        </div>
    </header>
    <!-- 展示 -->
    <section class="banner">
        <img src="./images/banner-logo.png" alt="">
        <img src="./images/banner-download.png" alt="">
        <img src="./images/banner-list.png" alt="">
        <img src="./images/banner-product.png" alt="">
    </section>
    <!-- 语音 -->
    <section class="sound">
        <h1>I'm QQ - 每一天，乐在沟通</h1>
        <div class="bg" data-stellar-background-ratio="0.3"></div>
        <div class="content">
            <div class="phone"></div>
            <h2>沟通，是跨越 <br /> 千山万水的亲切声音</h2>
            <p>
                    无论何时何地，你都能自由享受QQ在各类<br />
                    终端上带来的高清通话，与好友一起想聊多久聊多久
            </p>
        </div>
    </section>
    <!-- 文件 -->
    <section class="file">
            <div class="bg" data-stellar-background-ratio="0.3"></div>
            <div class="content">
                <h2>沟通，是随时随地<br /> 爽快收发</h2>
                <p>
                        通过QQ,电脑和手机上的文件都能收发自如，<br />
                        更有手机在线查阅，轻松你的工作和生活。
                </p>
                <div class="mac"></div>
            </div>
    </section>
    <section class="interest">
        <div class="bg" data-stellar-background-ratio="0.3"></div>
        <div class="content">
                <h2>沟通，是志同道合<br /> 的他们放肆青春</h2>
                <p>
                        即使世界很大，你也不会孤单，在兴趣部落<br />
                        有和你一样的人，期待着和你一起发现精彩。
                </p>
                <div class="phone"></div>
            </div>
    </section>
    <footer class="footer">
        <div class="content">
            <div class="plat">
                <a href="#" class="phone"> QQ 手机版</a>
                <a href="#" class="pc"> QQ PC版</a>
                <a href="#" class="mac"> QQ Mac版</a>
                <a href="#" class="pad"> QQ Pad版</a>
            </div>
            <p>Copyright © 1998- 2017 Tencent. All Rights Reserved.</p>
            <p>腾讯公司 版权所有</p>
        </div>
    </footer>
</body>
<script src="./js/jquery.min.js"></script>
<script src="./js/index.js"></script>
<script src="./js/jquery.stellar.js"></script>
</html>